﻿@model AMAP.Areas.Supplier.Models.Offer.SupplierOfferCreateViewModel
@{
    ViewBag.Title = "Proposez vos produits";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Détailles de votre proposition</h2>

<link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" rel="stylesheet" type="text/css" />

@section Javascript{
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.9.2.min.js")" type="text/javascript"></script>

    <script type="text/javascript">
        function show(type) {
            if (type == "fruit") {
                $('#FruitId').show();
                $('#VegetableId').hide();
                $('#OtherId').hide();
            } else if (type == "vegetable") {
                $('#FruitId').hide();
                $('#VegetableId').show();
                $('#OtherId').hide();
            } else {
                $('#FruitId').hide();
                $('#VegetableId').hide();
                $('#OtherId').show();
            }
        }
        $(function () {
            $('#FruitId').show();
            $('#VegetableId').hide();
            $('#OtherId').hide();

            $("#HarvestDate").datepicker({ regional: "fr", dateFormat: "dd/mm/yy" });
        });

        var i = 0;
        function AddOffer() {
            var type = "";
            var ProductId = 0;


            if (document.getElementById('radioFruit').checked == true) {
                type = "Fruit";
                ProductId = getSelectValueId('FruitId');
            } else if (document.getElementById('radioVegetable').checked == true) {
                type = "Legume";
                ProductId = getSelectValueId('VegetableId');
            } else {
                type = "Autre";
                ProductId = getSelectValueId('OtherId');
            }

            /* id product hidden*/
            var inputProductId = document.createElement("input");
            inputProductId.setAttribute("type", "hidden");
            inputProductId.setAttribute("class", "ProductId");
            inputProductId.setAttribute("name", "ItemList[" + i + "].ProductId");
            inputProductId.setAttribute("value", ProductId);

            /* unit input*/
            var inputUnit = document.createElement("input");
            inputUnit.setAttribute("type", "hidden");
            inputUnit.setAttribute("class", "Unit");
            inputUnit.setAttribute("name", "ItemList[" + i + "].Unit");
            inputUnit.setAttribute("value", document.getElementById('Unit').value);

            /* quantity input*/
            var inputQuantity = document.createElement("input");
            inputQuantity.setAttribute("type", "hidden");
            inputQuantity.setAttribute("class", "Quantity");
            inputQuantity.setAttribute("name", "ItemList[" + i + "].Quantity");
            inputQuantity.setAttribute("value", document.getElementById('Quantity').value);

            /* price input*/
            var inputPrice = document.createElement("input");
            inputPrice.setAttribute("type", "hidden");
            inputPrice.setAttribute("class", "Price");
            inputPrice.setAttribute("name", "ItemList[" + i + "].Price");
            inputPrice.setAttribute("value", document.getElementById('Price').value);

            /* date input*/
            var inputDate = document.createElement("input");
            inputDate.setAttribute("type", "hidden");
            inputDate.setAttribute("class", "HarvestDate");
            inputDate.setAttribute("name", "ItemList[" + i + "].HarvestDate");
            inputDate.setAttribute("value", document.getElementById('HarvestDate').value);


            var spanProductName = document.createElement("span");
            spanProductName.setAttribute("class", "ProductName");
            spanProductName.innerHTML = "<strong>Offre " + (i + 1) + "</strong> : ";
            spanProductName.innerHTML += document.getElementById('Quantity').value + " ";
            spanProductName.innerHTML += document.getElementById('Unit').value + " de ";
            if (document.getElementById('radioFruit').checked == true)
                spanProductName.innerHTML += getSelectValueText('FruitId');
            else if (document.getElementById('radioVegetable').checked == true)
                spanProductName.innerHTML += getSelectValueText('VegetableId');
            else
                spanProductName.innerHTML += getSelectValueText('OtherId');
            spanProductName.innerHTML += " à ";
            spanProductName.innerHTML += document.getElementById('Price').value + " € l'unité, récolté le ";
            spanProductName.innerHTML += document.getElementById('HarvestDate').value;



            spanProductName.appendChild(inputProductId);
            spanProductName.appendChild(inputUnit);
            spanProductName.appendChild(inputQuantity);
            spanProductName.appendChild(inputPrice);
            spanProductName.appendChild(inputDate);
            spanProductName.innerHTML += "<span style='padding:0 10px;cursor:pointer;' onclick='if (confirm('Êtes-vous sûr de vouloir supprimer cette proposition ?')) this.parentNode.parentNode.innerHTML = \'\';'>&times;</span><br /><br />";


            document.getElementById('Unit').value = "";
            document.getElementById('Quantity').value = "";
            document.getElementById('Price').value = "";
            document.getElementById('HarvestDate').value = "";


            var line = document.createElement("div");
            line.setAttribute("class", "line");
            line.appendChild(spanProductName);
            document.getElementById("Offers").appendChild(line);
            i++;
        }


        function getSelectValueId(selectId) {
            var selectElmt = document.getElementById(selectId);
            return selectElmt.options[selectElmt.selectedIndex].value;
        }

        function getSelectValueText(selectId) {
            var selectElmt = document.getElementById(selectId);
            return selectElmt.options[selectElmt.selectedIndex].text;
        }
    </script>
}

@using (Html.BeginForm())
{
    <div id="Offers">
    </div>
    <fieldset>
        <legend>Ajout d'une offre</legend>
        <br />
        <div class="editor-label">
            <label>Type de produit</label>
        </div>
        <div class="editor-field">
            <input id="radioFruit" type="radio" name="ProductType" value="Fruit" onclick="show('fruit')" checked="checked" />Fruit
        <input id="radioVegetable" type="radio" name="ProductType" value="Vegetable" onclick="show('vegetable')" />Légume
        <input id="radioOther" type="radio" name="ProductType" value="Other" onclick="show('other')" />Autre
        </div>
        <div class="editor-label">
            <label>Nom du produit</label>
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(x => x.FruitId, Model.FruitList)
            @Html.DropDownListFor(x => x.VegetableId, Model.VegetableList)
            @Html.DropDownListFor(x => x.OtherId, Model.OtherList)
        </div>
        <div class="editor-label">
            <label for="Unit">Conditionnement</label>
        </div>
        <div class="editor-field">
            <input type="text" name="Unit" id="Unit" placeholder="Unité de vente" />
        </div>
        <div class="editor-label">
            <label for="Quantity">Quantité proposée</label>
        </div>
        <div class="editor-field">
            <input type="text" name="Quantity" id="Quantity" placeholder="Quantité" onblur="this.value = this.value.replace('.', ',');" />
        </div>
        <div class="editor-label">
            <label for="Price">Prix proposée</label>
        </div>
        <div class="editor-field">
            <input type="text" name="Price" id="Price" placeholder="Prix à l'unité" onblur="this.value = this.value.replace('.', ',');" />
        </div>
        <div class="editor-label">
            <label for="HarvestDate">Date de récolte</label>
        </div>
        <div class="editor-field">
            <input type="text" name="HarvestDate" id="HarvestDate" placeholder="Date de récolte" />
        </div>
        <div class="editor-field">
            <a onclick="AddOffer()" class="button" style="border: 1px solid #909aec">Ajouter cette offre</a>
        </div>
    </fieldset>
    <p>
        <input type="submit" value="Soumettre les offres" />
    </p>
}